<template>
<f7-page name="show-list" class="page-list">
  <f7-navbar>
    <f7-nav-left>
      <f7-link icon="icon-bars" open-panel="left"></f7-link>
    </f7-nav-left>
    <f7-nav-center sliding>
      <f7-buttons class="buttons-row-tab">
        <f7-button active tab-link="#main-tab-beau">美丽</f7-button>
        <f7-button tab-link="#main-tab-find">发现</f7-button>
        <f7-button tab-link="#main-tab-like">喜欢</f7-button>
      </f7-buttons>
    </f7-nav-center>
    <f7-nav-right>
      <f7-link icon="icon-bars"></f7-link>
    </f7-nav-right>
  </f7-navbar>

  <f7-tabs swipeable>
    <f7-tab id="main-tab-beau" active>
      <f7-page no-navbar pull-to-refresh @ptr:refresh="loadBeauData">
        <div class="flow-container">
          <card-good v-for="good of beauList" :key="good.Id" :good="good" class="card-flow"></card-good>
        </div>
      </f7-page>
    </f7-tab>
    <f7-tab id="main-tab-find">
      <f7-page no-navbar pull-to-refresh @ptr:refresh="loadFindData">
        <div class="flow-container">
          <card-good v-for="good of beauList" :key="good.Id" :good="good" class="card-flow"></card-good>
        </div>
      </f7-page>
    </f7-tab>
    <f7-tab id="main-tab-like">
      <f7-page no-navbar pull-to-refresh @ptr:refresh="loadBeauData">
        <div class="flow-container">
          <card-good v-for="good of beauList" :key="good.Id" :good="good" class="card-flow"></card-good>
        </div>
      </f7-page>
    </f7-tab>
  </f7-tabs>
</f7-page>
</template>

<script>
import CardGood from './components/card-good'

export default {
  name: 'list',
  components: {
    CardGood
  },
  data() {
    return {
      beauList: [],
      findList: [],
      likeList: [],
    }
  },
  created() {
    this.loadBeauData()
  },
  methods: {
    loadBeauData(e) {
      $.fetch('beau').then(data => {
        this.beauList = data
        e && e.detail.done()
      })
    },
    loadFindData(e) {
      $.fetch('find').then(data => {
        this.findList = data
        e && e.detail.done()
      })
    }
  }
}
</script>

<style lang="scss">
.page-list {
  .swiper-slide .preloader {
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
  }
}

.flow-container {
  column-count: 2;
  // column-width: 20px;
  column-gap: 0;

  .card-flow {
    break-inside: avoid;
  }
}

.buttons-row-tab {
  .tab-link {
    height: 100%;
    line-height: 42px;
    vertical-align: middle;
    border-radius: 0;
    color: #000;
    font-weight: normal;
    background-color: rgba(0, 0, 0, 0);
    border: none;

    &:first-child, &:last-child {
      border: none;
    }
  }

  .tab-link.active {
    color: #007aff;

    &:after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 40px;
      margin-left: -20px;
      border-bottom: 3px solid #007aff;
    }
  }
}

</style>
